<div class="page page-table-static clearfix">

    <ol class="breadcrumb breadcrumb-small">
        <li>Tables</li>
        <li class="active"><a href="#/tables/data-table">Data Tables</a>
        </li>
    </ol>

    <div class="page-wrap">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-lined table-responsive mb30" ng-controller="DataTableCtrl">
                    <div class="panel-body">
                        <div class="small text-bold left mt5">
                            Show&nbsp;
                            <select data-ng-model="numPerPage" data-ng-options="num for num in numPerPageOpts" data-ng-change="onNumPerPageChange()">
                            </select>
                            &nbsp;entries
                        </div>

                        <form class="form-horizontal right col-lg-4">
                            <input type="text" class="form-control input-sm" placeholder="Type keyword" data-ng-model="searchKeywords" data-ng-keyup="search()">
                        </form>
                    </div>
                    <!-- data table -->
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>
                                    Rendering Engine
                                    <div class="th">
                                        <i class="fa fa-caret-up icon-up" ng-click=" order('engine') " ng-class="{active: row == 'engine'}"></i>
                                        <i class="fa fa-caret-down icon-down" ng-click=" order('-engine') " ng-class="{active: row == '-engine'}"></i>
                                    </div>
                                </th>
                                <th>
                                    Browser
                                    <div class="th">
                                        <i class="fa fa-caret-up icon-up" ng-click=" order('browser') " ng-class="{active: row == 'browser'}"></i>
                                        <i class="fa fa-caret-down icon-down" ng-click=" order('-browser') " ng-class="{active: row == '-browser'}"></i>
                                    </div>
                                </th>
                                <th>
                                    Platform(s)
                                    <div class="th">
                                        <i class="fa fa-caret-up icon-up" ng-click=" order('platform') " ng-class="{active: row == 'platform'}"></i>
                                        <i class="fa fa-caret-down icon-down" ng-click=" order('-platform') " ng-class="{active: row == '-platform'}"></i>
                                    </div>
                                </th>
                                <th>
                                    Engine Version
                                    <div class="th">
                                        <i class="fa fa-caret-up icon-up" ng-click=" order('version') " ng-class="{active: row == 'version'}"></i>
                                        <i class="fa fa-caret-down icon-down" ng-click=" order('-version') " ng-class="{active: row == '-version'}"></i>
                                    </div>
                                </th>
                                <th>
                                    CSS Grade
                                    <div class="th">
                                        <i class="fa fa-caret-up icon-up" ng-click=" order('grade') " ng-class="{active: row == 'grade'}"></i>
                                        <i class="fa fa-caret-down icon-down" ng-click=" order('-grade') " ng-class="{active: row == '-grade'}"></i>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="data in currentPageStores track by $index">
                                <td>{{data.engine}}</td>
                                <td>{{data.browser}}</td>
                                <td>{{data.platform}}</td>
                                <td>{{data.version}}</td>
                                <td>{{data.grade}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- #end data table -->

                    <div class="panel-footer clearfix">
                        <p class="left mt15 small">
                            Showing {{currentPageStores.length*(currentPage - 1) + 1}} to {{currentPageStores.length*currentPage}} of {{datas.length}} entries
                        </p>
                        <pagination boundary-links="true" total-items="filteredData.length" ng-model="currentPage" class="pagination-sm right" max-size="5" ng-change="select(currentPage)" items-per-page="numPerPage" rotate="false" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- #end row -->
    </div>
    <!-- #end page-wrap -->

</div>